<template>
    <div class="iframe">
        <div class="i-title">
            <h3>状态处理</h3>
        </div>
        <div class="i-tip">
            <div class="i-tip" v-loading="data.loading">{{ data.tip }}</div>
            <el-button @click="btnSend">多次请求</el-button>
            <el-button @click="btnSend2">请求速度</el-button>
        </div>
    </div>
</template>
<script>
import { reactive, onMounted } from 'vue';
import { ElNotification } from 'element-plus'
export default {
    setup() {
        let data = reactive({
            loading: false,
            tip: "",
            tip2: ""
        })
        function p1(n) {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    if (n > 0) {
                        resolve(n)
                    } else {
                        reject('不能小于0')
                    }
                }, 1000)
            })
        }
        function loadData() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    resolve("请求成功!")
                }, 5000)
            })
        }
        function timeOut() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    reject("请求超时!")
                }, 5000)
            })
        }
        function btnSend() {
            data.loading = true;
            data.tip = "";
            Promise.all([
                p1(5), p1(2), p1(7)
            ]).then(v => {
                console.log(v)
                data.loading = false;
                data.tip = "加载成功！"
            }, e => {
                console.log(e)
                ElNotification({
                    title: '错误',
                    message: e,
                    type: 'error',
                })
            })
        }
        function btnSend2() {
            data.loading = true;
            data.tip = "";
            // 1.说明比谁执行的快，作为执行回调函数标准
            Promise.race([
                loadData(),
                timeOut()
            ]).then(v => {
                console.log(v)
                data.loading = false;
                data.tip = v;
            }, e => {
                console.log(e)
                ElNotification({
                    title: '错误',
                    message: e,
                    type: 'error',
                })
            })
        }
        return {
            data,
            btnSend,
            btnSend2
        }
    }
}
</script>